<template>
  <div class="todo-list">
    <div class="todo-item" v-for="(item, index) in todoItems" :key="index">
      <a-row class="todo_content">
        <a-col :span="12">
          <div class="new-users">{{ item.newUsers }}
            <ExclamationCircleOutlined />
          </div>
          <div class="title">{{ item.title }}</div>
        </a-col>
        <a-col :span="12">
          <EchartsComes :chartOption="item.option" :chartStyle="chartStyle"/>
        </a-col>
      </a-row>
      <a-row class="todo_content margintop_12">
        <a-col :span="12">
          <div class="total">{{ item.total }}</div>
        </a-col>
        <a-col class="total" :span="12">
           <a-row class="todo_content space-between">
            <a-col :span="12"  class="text_left text_color">
              <ArrowDownOutlined />{{ item.dailyIncrease}}
            </a-col>
            <a-col :span="12" class="text_right">
              <div class="deClick" @click="deClick(item)">
                日环比<RightOutlined />
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <!-- <button @click="refreshData">刷新数据</button> -->
  </div>
</template>

<script setup>
import EchartsComes from './EchartsComes.vue'
import { ref, onMounted,onBeforeUnmount, watchEffect,nextTick,defineEmits,defineProps } from 'vue';
import {
    ExclamationCircleOutlined,
    RightOutlined,
    ArrowDownOutlined
} from "@ant-design/icons-vue";
const props = defineProps({
  todoItems: {
    type: Object,
    default: () => ({}),
    // required: true
  }
})
const chartStyle = {
  width: '100%',
  height: '100%'
}
const emit = defineEmits(['sendData']);
const deClick =(item)=>{
  console.log(111,item);
  emit('sendData', item);
}

const todoItems111 = ref([
  {
    title: '584',
    total: '总量: 1.89万',
    newUsers: '新增用户(人)',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show:false,
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Thu1', 'Fri1', 'Sat1', 'Sun1','Sun2']
      },
      yAxis: {
        type: 'value',
        show:true,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260,230, 224, 218,55,400],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
  },
  {
    title: '151',
    total: '总量: 1.89万',
    newUsers: '新增次留(人)',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
  },
  {
    title: '80128',
    total: '总量: 13.89万',
    newUsers: '活跃量(人)',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 120],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
  },
  {
    title: '68128',
    total: '总量: 11.89万',
    newUsers: '下载量(次)',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 55],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
  },
]);

const refreshData = () => {
  // 模拟数据刷新
  console.log('数据已刷新');
  // 这里可以添加实际的数据刷新逻辑
};

</script>

<style lang="less" scoped>
.todo-list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding:20px;
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.todo-item {
  padding: 10px 14px;
  width: 24%;
  background-color: "#F9FRFB";
  border: 1px solid #EDFAF1;
  font-weight: 400;
  font-size: 8px;
  color: #6E6E6E;
}
.todo_content{
  .title{
    color: black;
    font-size: 18px;
    font-weight: bolder;
  }
}
.text_left{
  text-align: center;
  // background-color: rgba(237, 250, 241, 1);
}
.text_color{
  color: rgba(76, 200, 126, 1);
}
.text_right{
  text-align: right;
}
.margintop_12{
  margin-top: 12px;
}
.deClick{
  cursor: pointer;
}
.rt{
  flex: 1;
  background-color: #EDFAF1;
}


.title,
.total,
.new-users,
.daily-increase {
  margin: 5px 0;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
  .echarts-chart {
    /* width: 100%; */
    /* height: 400px; Adjust the height as needed */
  }
</style>